<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动</title>
    <style>
        #boll{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            margin-left: 0px;
        }
        #boll2{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            border-radius: 50%;
            margin-left: 0px;
        }
    </style>
</head>
<body>
        <div id="boll"></div>
        <div id="boll2"></div>
        <input type="button" value="点我1" onclick=" myMove('boll')">
        <input type="button" value="点我2" onclick="myMove2('boll2')">
        <script>
            function gogo() {
                var timer;
                function domove(id) {
                    clearInterval(timer);
                    var bollobj = window.getComputedStyle(nowMarginLeft);
                    function  move() {
                        console.log('aa');
                        var nowMarginLeft =document.getElementById(bollobj,'marginleft');
                        if(nowMarginLeft>=500){
                            clearInterval(timer);
                        }else{
                            bollobj.style.marginLeft = nowMarginLeft + 1 + 'px'
                        }
                        
                    }
                    timer = setInterval(move ,10);
                }
                return domove;
            }
            var myMove = gogo();
            var myMove2 = gogo()
        </script>
</body>
</html>